<template>
  <div class="supplier-container">
    <div class="top">
      <div class="left">
        <el-input placeholder="請輸入供應商名稱"></el-input>
        <el-select placeholder="供應商狀態" style="margin: 0 15px">
          <el-option></el-option>
        </el-select>
        <el-select placeholder="全部">
          <el-option></el-option>
        </el-select>
        <div class="btn-list">
          <el-button type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </div>
      </div>
      <div class="right">
        <el-button>
          <svg-icon icon-class="import"></svg-icon>
          導入
        </el-button>
        <el-button>
          <svg-icon icon-class="export"></svg-icon>
          導出
        </el-button>
        <el-button type="primary" @click.native="addSupplier">
          <svg-icon icon-class="staff-add"></svg-icon>
          新增供應商
        </el-button>
      </div>
    </div>
    <div class="table-wrap br-20">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="供應商編號">
          <template>
            <div>
              <div class="text-1">QUOTE-2024-001</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="供應商名稱">
          <template>
            <div class="text-1">XXXX科技公司</div>
          </template>
        </el-table-column>
        <el-table-column label="聯絡人">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="電話">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="郵箱">
          <template>
            <span>2025-08-06</span>
          </template>
        </el-table-column>
        <el-table-column label="狀態">
          <template>
            <span class="status success">已成交</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="supplierDetailVisible = true">查看</el-button>
            <el-button type="text" size="small" @click.native="editSupplier">編輯</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog :title="editSupplierTitle" class="add-receipt-dialog" :visible.sync="addSupplierVisible" width="680px" top="5%">
      <el-form :model="addSupplierFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="供應商編號">
              <el-input v-model="addSupplierFormData.name" autocomplete="off" placeholder="請輸入供應商編號"></el-input>
            </el-form-item>
            <el-form-item label="供應商名稱">
              <el-input v-model="addSupplierFormData.name" autocomplete="off" placeholder="請輸入供應商名稱"></el-input>
            </el-form-item>
            <el-form-item label="聯絡人">
              <el-input v-model="addSupplierFormData.name" autocomplete="off" placeholder="請輸入聯絡人"></el-input>
            </el-form-item>
            <el-form-item label="聯繫電話">
              <el-input v-model="addSupplierFormData.name" autocomplete="off" placeholder="請輸入聯繫電話"></el-input>
            </el-form-item>
            <el-form-item label="電子郵件">
              <el-input v-model="addSupplierFormData.name" autocomplete="off" placeholder="請輸入電子郵件"></el-input>
            </el-form-item>
            <el-form-item label="供應商類型">
              <el-select placeholder="供應商類型">
                <el-option></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="account-info">
          <h5>狀態與關聯資訊</h5>
          <div class="account">
            <el-form-item label="供應商狀態">
              <el-select v-model="addSupplierFormData.name" placeholder="請選擇狀態">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="合作起始時間">
              <el-date-picker></el-date-picker>
            </el-form-item>
            <el-form-item label="銀行賬戶信息">
              <el-input v-model="addSupplierFormData.name" autocomplete="off" placeholder="請輸入銀行賬戶信息"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSupplierVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddSupplier">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog class="supplier-detail-dialog" title="供應商詳情" width="680px" :visible.sync="supplierDetailVisible">
      <div class="detail">
        <div class="detail-item">
          <span>供應商編號:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>供應商名稱:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>業務類型:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>聯絡人:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>職位:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>電話:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>電子郵箱:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>狀態:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>地址:</span>
          <span></span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="supplierDetailVisible = false">關閉</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'supplier-management',
  data() {
    return {
      tableData: [{}],
      supplierDetailVisible: false,
      addSupplierVisible: false,
      editSupplierTitle: '新增供應商',
      addSupplierFormData: {},
      detailData: [],
      imageUrl: ''
    }
  },
  methods: {
    addSupplier() {
      this.addSupplierVisible = true
      this.editSupplierTitle = '新增供應商'
    },
    editSupplier() {
      this.addSupplierVisible = true
      this.editSupplierTitle = '編輯供應商'
    },
    submitAddSupplier() {}
  }
}
</script>

<style scoped lang="less">
.supplier-container {
  .top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .left {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .el-input {
        width: 232px;
      }
      .el-select {
        width: 168px;
      }
      .el-date-picker {
        width: 172px;
      }
      .btn-list {
        margin-left: 15px;
      }
    }
  }
  .table-wrap {
    background: #fff;
    padding: 25px 30px;
    h4 {
      font-size: 18px;
      line-height: 25px;
      margin: 0 0 25px 0;
    }
    .table-foot {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .supplier-detail-dialog {
    .detail {
      background: rgba(60, 88, 252, 0.05);
      padding: 24px 26px;
      &-item {
        display: flex;
        justify-content: flex-start;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 23px;
      }
    }
  }
}
</style>
